<template>
    <div class="pe-option-group">
        <div class="pe-option-group-title">{{ title }}</div>
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
import { provide, toRefs } from "vue"

/**
 * @param title 分组标题
 * @param disabled 该分组下的选项是否禁用
 */
interface Props {
    title?: string,
    disabled?: boolean
}

const props = withDefaults(defineProps<Props>(), {
    disabled: false
})

const { disabled } = toRefs(props)

provide("pe-option-group-disabled", disabled)
</script>

<script lang="ts">
export default {
    name: "pe-option-group"
}
</script>